<!-- index -->
<template>
  <dv-border-box-11
    class="container"
    title="keledd"
  >
    <div class="left">
      <dv-decoration-2
        :reverse="true"
        class="left-decoration"
      />
      <div class="leftList">
        <a-input-search
          placeholder="input search text"
          style="width:100%;margin:2.5vh auto 2vh"
          @search="onSearch"
        />
        <userList></userList>
      </div>
    </div>
    <div class="right">
      <dv-decoration-1 class="right-decoration" />
      <dv-border-box-1 class="right-border">
        <chartRoom class="chartRoomFa"></chartRoom>
      </dv-border-box-1>
    </div>
  </dv-border-box-11>
</template>

<script>
import userList from "../../components/userList";
import chartRoom from "../../components/chartRoom";

export default {
  components: { userList, chartRoom },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    sendMessage() {
      this.$socket.emit("chatmessage", { msg: "hello" });
    },
    // 搜索
    onSearch() { },
  },
  created() { },
  mounted() {
    // this.$socket.emit("connection", 1);
  },
};
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
  @{deep}.border-box-content {
    display: flex;
    width: 100%;
    height: 100%;
    .left {
      display: flex;
      width: 20%;
      height: 100%;
      .left-decoration {
        margin-left: 17px;
        margin-top: 30px;
        width: 5px;
        height: 95%;
      }
      .leftList {
        margin-top: 4vh;
        flex: 1;
        height: 95vh;
        overflow: hidden;
      }
    }
    .right {
      display: flex;
      flex: 1;
      justify-content: flex-end;
      .right-decoration {
        padding-top: 2vh;
        width: 25vw;
        height: 5%;
        position: absolute;
      }
      .right-border {
        padding-top: 7vh;
        padding-bottom: 2vh;
        margin: 0 10px;
        .border-box-content {
          width: 90%;
          height: 90%;
          position: absolute;
          top: 8.5%;
          left: 5%;
          .chartRoomFa {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>